import Img from '../../assets/img.png'
import Lgbg from '../../assets/lgbg.jpg'
import Logo from '../../assets/logo.png'
import './index.scss'
import { Button, Form, Input } from 'antd'
import { LockOutlined, UserOutlined } from '@ant-design/icons'
import { login } from '../../api/users'
import { useDispatch } from 'react-redux'
import { setToken } from '../../store/login/authSlice.ts'
import { useState } from 'react'
import { useNavigate } from 'react-router-dom'

export default function Login() {
  const dispatch = useDispatch()
  const navigate = useNavigate()
  const [loadingStatus, setLoadingStatus] = useState<boolean>(false)

  type FieldType = {
    username?: string
    password?: string
    remember?: string
  }

  // 获取表单实例
  const [form] = Form.useForm()
  // 调用表单实例的校验方法进行校验
  const handleLogin = () => {
    form
      .validateFields()
      .then(async (values) => {
        setLoadingStatus(true)
        // 校验成功，准备登录
        const {
          data: { token, username },
        } = await login(values)
        if (token) {
          dispatch(setToken(token))
          localStorage.setItem('username', username)
          navigate('/dashboard')
        }
        setLoadingStatus(false)
      })
      .catch((error) => {
        setLoadingStatus(false)
        console.log(error)
      })
  }

  return (
    <>
      <div className="login" style={{ backgroundImage: `url(${Img})` }}>
        <div className="lgbg" style={{ backgroundImage: `url(${Lgbg})` }}>
          <div className="part">
            <div className="title">
              <div className="logo">
                <img src={Logo} style={{ width: 100 }} />
              </div>
              <h1>智慧园区管理平台</h1>
            </div>
            {/* form表单 */}
            <div className="form">
              <Form
                form={form}
                name="basic"
                style={{ width: 250 }} // 修改 maxWidth 为 width 并设定一个具体值
                initialValues={{ remember: true, username: 'admin', password: 'abc123456' }}
                autoComplete="off"
              >
                <Form.Item<FieldType>
                  name="username"
                  // 自定义校验规则
                  rules={[
                    { required: true, message: '请输入账号' },
                    { max: 15, message: '账号长度不能超过15位' },
                    { min: 5, message: '账号长度不能小于5位' },
                    { pattern: /^[a-zA-Z0-9_]+$/, message: '账号只能包含字母、数字和下划线' },
                  ]}
                >
                  <Input prefix={<UserOutlined />} placeholder="请输入账号" />
                </Form.Item>

                <Form.Item<FieldType> name="password" rules={[{ required: true, message: '请输入密码' }]}>
                  <Input.Password prefix={<LockOutlined />} placeholder="请输入密码" />
                </Form.Item>

                <Form.Item wrapperCol={{ style: { textAlign: 'center' } }}>
                  <Button
                    type="primary"
                    htmlType="submit"
                    style={{ width: '100%' }}
                    onClick={handleLogin}
                    loading={loadingStatus}
                  >
                    Submit
                  </Button>
                </Form.Item>
              </Form>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}
